import { Carousel, WingBlank } from 'antd-mobile';

import React from 'react';
class Lunbo extends React.Component {
  state = {
    data: [
        'https://flycopic.oss-cn-hangzhou.aliyuncs.com/mall/cms/20210122/image/33(4).jpg?x-oss-process=style/cms-images',
        'https://flycopic.oss-cn-hangzhou.aliyuncs.com/mall/cms/20201203/image/banner750x400.jpg?x-oss-process=style/cms-images',
        'https://flycopic.oss-cn-hangzhou.aliyuncs.com/mall/cms/20201229/image/22(1)%E7%A7%BB%E5%8A%A8%E7%AB%AF.jpg?x-oss-process=style/cms-images',
        'https://flycopic.oss-cn-hangzhou.aliyuncs.com/mall/cms/20210622/image/11.jpg?x-oss-process=style/cms-images',
        'https://flycopic.oss-cn-hangzhou.aliyuncs.com/mall/cms/20201116/image/%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD%E7%A7%BB%E5%8A%A85.jpg?x-oss-process=style/cms-images'
    ],
    imgHeight: 176,
  }
  
  render() {
    return (
      <WingBlank>
        <Carousel
          autoplay={false}
          infinite
          autoplay={true}
        //   beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
        //   afterChange={index => console.log('slide to', index)}
        >
          {this.state.data.map(val => (
            <a
              key={val}
              href="/"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}


export default Lunbo

